/**
 * Created by Delicate on 2018/1/3.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    ScrollView,

} from 'react-native';

import NavBar from '../../components/NavBarView'
import {
    DefaultField,
    DefaultLabel,
} from '../../components/Form'

let _self;

class Views extends React.Component {

    constructor(props) {
        super(props)
        _self = this;
        this.state = {
            selected: {},
            list: []
        };
        const params = this.props.navigation.state.params;
        this.state.list = params.list;
        //回填已选项
        const selectedNames = params.selectedNames ? params.selectedNames.toString().split(',') : [];
        const selectedIds = params.selectedIds ? params.selectedIds.toString().split(',') : [];
        for (let i = 0; i < selectedNames.length >>> 0; i++) {
            this.state.selected[selectedIds[i]] = selectedNames[i]
        }
    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    select(item) {
        let selected = _self.state.selected;
        if (selected[item.id]) {
            delete selected[item.id]
        } else {
            selected[item.id] = item.name
        }
        _self.setState({selected}, () => {
            if (_self.props.navigation.state.params && _self.props.navigation.state.params.result) {
                let keys = [], values = [];
                for (const key in _self.state.selected) {
                    keys.push(key);
                    values.push(_self.state.selected[key]);
                }
                _self.props.navigation.state.params.result({
                    second_classify_id: keys.join(','),
                    second_classify: values.join(',')
                });
            }
        })
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <NavBar host={this} title="供应链资产"/>
                <ScrollView style={styles.container}>
                    <View style={styles.box}>
                        {
                            this.state.list.map(item => {
                                return (
                                    <DefaultField key={item.id} text={item.asset_type_name}>
                                        <DefaultLabel
                                            rightIconStyle={styles.icon}
                                            onPress={() => this.select({id: item.id, name: item.asset_type_name})}
                                            rightIcon={this.state.selected[item.id] ? require('../../sources/icon_demand_selected.png') : require('../../sources/icon_demand_unSelect.png')}/>
                                    </DefaultField>
                                )
                            })
                        }
                    </View>
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: layout.MAIN_BACKGROUND_COLOR
    },
    box: {
        backgroundColor: '#fff'
    },
    icon: {
        width: layout.width(40),
        height: layout.height(40),
    }
})

//路由
const AssetTypeChildrenList = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'AssetTypeChildrenList',
    sign: true
};

export default AssetTypeChildrenList;